<template>
  <Drawer title="显示排序设置" v-model="drawShow" :closable='true' :transfer='false' width="720" id='display-order'>
    <div>
      <Row>
        <Col style="margin: 16px;">
          <span class="search-label" style="margin:0 10px;">销售渠道：</span>
          <Select v-model="channel" style="width:180px" placeholder='请选择' @on-change='changeChannel'>
            <Option v-for="item in saleList" :value="String(item.number)" :key="item.value">{{ item.name }}</Option>
          </Select>
        </Col>
      </Row>
      <Table stripe class="table-list" :columns="columns" :data="displayData" :draggable='true' @on-drag-drop='dragTable' :height='getHistoryHeight'>
        <template slot-scope="{ row }" slot="standardPrice">
          <span v-if='row.goodsPrices.length>0'>{{row.goodsPrices[0].amount.toFixed(2)}}</span>
        </template>
        <template slot-scope="{ row }" slot="drag">
          <Icon type="md-move" size='20' style="cursor: s-resize;" />
        </template>
      </Table>
    </div>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 16px" class="btn" @click='drawShow = false'>取消</Button>
      <Button type="primary" class="btn" @click='sureSelect'>确定</Button>
    </div>
  </Drawer>
</template>

<script>
import { getChannelList, getGoodsList, sortGoodsList } from '@/api/commondity/index'
export default {
  computed: {
    getHistoryHeight () {
      let height = 0
      if (this.displayData.length > 10) {
        height = (document.documentElement.clientHeight || document.body.clientHeight) - 168
      } else {
        height = 0
      }
      return height
    }
  },
  watch: {
    type (val) {
      if (val === '1') {
        this.columns.unshift({
          title: '商品名称',
          key: 'title'
        })
      } else if (val === '2') {
        this.columns.unshift({
          title: '商品名称',
          key: 'skuName'
        })
      }
    },
    value (val) {
      this.drawShow = val
    },
    drawShow (status) {
      if (!status) {
        this.$emit('closeDraw', status)
      } else {
        this.type = this.transmit.type
        this.channel = this.saleType
        this.getChannel()
        this.getList()
      }
    }
  },
  props: {
    value: {
      type: Boolean
    },
    saleType: {
      type: String,
      default: '1'
    },
    transmit: {
      type: Object,
      default: () => ({
        goodsKind: '',
        type: '',
        shopId: ''
      })
    }
  },
  data () {
    return {
      type: '',
      channel: '',
      displayData: [],
      drawShow: false,
      saleList: [],
      columns: [
        // {
        //   title: '商品名称',
        //   key: this.type === '1' ? 'title' : this.type === '2' ? 'skuName' : ''
        // },
        {
          title: '平台价',
          slot: 'standardPrice'
        },
        // {
        //   title: '标签',
        //   key: ''
        // },
        {
          title: '拖动',
          slot: 'drag'
        }
      ]
    }
  },
  methods: {
    dragTable (index1, index2) {
      let oldValue = this.displayData[index1]
      this.displayData.splice(index1, 1)
      this.displayData.splice(index2, 0, oldValue)
    },
    changeChannel (val) {
      this.$emit('changeChannnelType', val)
      this.getList()
    },
    sureSelect () {
      sortGoodsList({
        channelGoodsIds: this.displayData.map(item => {
          return item.channelGoodsId
        })
      }).then(res => {
        const result = res.data || {}
        this.drawShow = false
        if (result.status === 200) {
          this.$Message.success('操作成功！')
          this.$emit('sureSelect', true)
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    onClose () {
      this.$emit('onClose', false)
    },
    // 获取渠道列表
    getChannel () {
      getChannelList().then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.saleList = result.data
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    // 获取列表
    getList () {
      getGoodsList({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsStatus: 1,
        channelId: this.channel,
        goodsKind: this.transmit.goodsKind,
        shopId: this.transmit.shopId,
        isShow: '1',
        limit: 99999,
        offset: 0,
        sortBy: 'sortNo'
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.displayData = result.data.goods || []
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  }
}
</script>

<style lang='less'>
#display-order{
  .ivu-drawer-body {
    padding: 0;
  }
  .demo-drawer-footer{
    width: 720px;
    right: 0;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
}
</style>
